<template>
  <el-container class="home-container" >
    <el-header class="home-header">
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple">
          <img src="./logo.png" alt="黑马程序员">
        </div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple header-center">电商管理系统</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
          <a href="#" @click.prevent="handleLogout">退出</a>
        </div></el-col>
      </el-row>
    </el-header>
    <el-container class="container">
    <el-aside width="200px" class="home-aside">
       <el-menu
      default-active="2"
      class="el-menu-vertical-demo home-aside-container"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened='true'>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1"><a href="#/user">用户列表</a></el-menu-item>
          </el-menu-item-group>
         </el-submenu>
         <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>权限管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">角色列表</el-menu-item>
            <el-menu-item index="2-2">权限列表</el-menu-item>
          </el-menu-item-group>
         </el-submenu>
         <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>商品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">商品列表</el-menu-item>
            <el-menu-item index="3-2">分裂参数</el-menu-item>
            <el-menu-item index="3-3">商品分类</el-menu-item>
          </el-menu-item-group>
         </el-submenu>
         <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>订单管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">订单列表</el-menu-item>
          </el-menu-item-group>
         </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>数据统计</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">数据报表</el-menu-item>

          </el-menu-item-group>
         </el-submenu>
      </el-menu>
  </el-aside>
    <el-main class="home-main">
     <router-view></router-view>
    </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    handleLogout () {
      this.$confirm('你确定要退出吗?', '退出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      // 删除本地存储 tpken
        window.localStorage.removeItem('token')
        // 跳转到login页面
        this.$router.push('/login')
        this.$message({
          type: 'success',
          message: '退出成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    }
  }

}
</script>

<style>

  .home-container,.container,.home-header,.home-aside {
    height:100%;
  }
  .home-header {
    background-color: #b3c0d1;
    padding: 0;
    line-height:60px;
    text-align: center;
  }
  .header-center{
    font-size:30px;
  }
  .home-aside{
    background-color: #d3dce6;
  }
  .home-aside-container{
    height:100%;
  }
  .home-main{
    background-color: #e9eef3;
  }

</style>
